<template>
<div class='wrap'>

      <v-header :userName="userNameHeader"></v-header>

  <div class='detail'>
    <section @click.stop='back' class="return" style='display:inline-block'><a>返回上层</a></section>
    <section class="view">
       <div class="header">
         <span v-if='res.type == "请"'>假</span><span v-else>销</span>
         <span>{{res.name}}的{{res.type}}假申请</span>
         <span>{{res.deptname}}</span>
         <span class="right">{{params.applyId}}</span>
         <span class="right">审批编号</span>
       </div>
       <div class="content">
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type}}假类型</span><span>{{res.leave_name}}<el-tooltip
						v-for='(k,i) in aTypeSelect'
						v-if='k.code_name == res.leave_name'
						:content='k.comment'
						popper-class='tooltip-300'
					>
					<i class="wenhao">?</i>
				</el-tooltip></span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>开始时间</span><span>{{res.start_time}}</span><span class='color-one'>{{res.Leave_st_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>{{res.type=="销"?"实际":""}}结束时间</span><span>{{res.end_time}}</span><span class='color-one'>{{res.Leave_end_section | ampm}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>请假天数</span><span>{{res.leave_day}} 天</span></div>
         <div class="reason"><span :class='{"span-width":res.type=="销"}' class='color-one'>请假事由</span><span>{{res.leave_reason}}</span></div>
         <div><span :class='{"span-width":res.type=="销"}' class='color-one'>当前步骤</span><span :class="handleColor(res.audit_status_name)">{{res.audit_status_name}}</span></div>
         <div>
           <span :class='{"span-width":res.type=="销"}' class='color-one'>附件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
           <div class="imgContainer" v-if='imgList.length'>
           	   <template v-for="(k,index) in imgList">
           	   			<img width="100px" @click="showLightBox(index)" :src='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token' alt="" />
           	   </template>
           </div>
           <a style='margin-left: 12px;' v-if='fileList.length'>
             <a 
             :href='Axios.baseURI+"/"+URL.downloadFile.url+"?id="+k.id+"&token="+token'
              style='display:block' 
              class='color-third' 
              v-for='(k,i) in fileList'>
              <i :class="handleFileType(k.fileHz)"></i>
              <span>{{k.fileName}}</span>
             </a>
           </a>
           <p style='margin-left:14px' v-if='fileList.length === 0 && imgList.length === 0'>无</p>
         </div>    
       </div>

        <section class="steps" >
          <div v-for='(k,i) in LogList' v-changeHeight class='steps-list'>

            <div class="date">{{k.loger_date.replace(/\//g,"-")}}&nbsp;&nbsp;&nbsp;{{k.loger_time}}</div>

            <div class="xian" :class='{ last:i == LogList.length - 1 }'>
              <span class="el-icon-circle-check" :class='{ok:k.loger_time}'></span>
            </div>

              
            <p class="people">
              <span>{{k.loger_oper}}</span>
              <span class="color-one">({{k.dept_descr}})</span>
              
            </p> 
            <div class="buzhou" :class='handleColor(k.oper_result_name)'> {{k.oper_result_name}}</div>
            <p class='message'>{{k.loger_info || ''}}</p>
            
          </div>


               
        </section>


        <section class="deside" v-if='buttonFlag'>
          <a class="return" :class='{select:type=="同意"}' @click.stop='type="同意"'>同意</a>
          <a class="return" :class='{select:type=="拒绝"}' @click.stop='type="拒绝"'>拒绝</a>
          <a class="return" @click.stop="dialogVisiable = true">抄送</a>
        </section>


        <section class="deside" v-else>
          <el-button disabled>已{{type}}</el-button>
        </section>

        <section class="text-area">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请先点击拒绝或同意"
            v-model="textarea"
            :disabled="!type">
          </el-input>
          <el-button
            v-if='status!==1'
            class="submit" 
            type="primary"
            :disabled="!type"
            @click.stop='onSubmit'
            >
            提交<span v-if="type"></span>
          </el-button>
        </section>


        <el-dialog
          custom-class='dialog'
          :visible.sync="dialogVisiable"
          top='2vh'
          lock-scroll
          @open='oldZhihuiren = zhihuirenSelect'
        > 
    
      <span slot="title" class="dialog-title">
         选择知会人
      </span>

      

      <el-row class="body" justify='space-between'>
        
        <el-col class="body-left" :span='12'>
            <el-row>
              <el-col :span='22'>
                <el-input
								 icon="search"
								 class="input" placeholder="搜索 拼音 名字 编号"
                 v-model='zhihuiInput'
								 @keyup.enter.native='zhihuiSearch'
								 :on-icon-click="zhihuiSearch"></el-input>
              </el-col>
            </el-row>

					
						<section class="mianbao">
              <el-tooltip popper-class='tooltip2' :content="getCcList && getCcList.fristDept.descr" placement="top">
							  <p :style='mianbaoShowIf()?"":"overflow:visible"' @click.stop='sendBumenAjax(getCcList && getCcList.fristDept)'>{{getCcList && getCcList.fristDept.descr}}</p>
							</el-tooltip>

              <span v-if='mianbaoShowIf()' class="el-icon-arrow-right" style="margin-top:4px"></span>
              <el-tooltip  v-if='mianbaoShowIf()' popper-class='tooltip2' :content="getCcList && getCcList.checkDept.descr" placement="top">
						  	<p>{{getCcList && getCcList.checkDept.descr}}</p>
              </el-tooltip>
             
						</section>

			
						<section class="bumen" v-if='getCcList && getCcList.deptList.length'>
							<p v-for='(k,i) in getCcList.deptList' @click.stop='sendSecondBumenAjax(k)'>
								<span>{{k.descr}}</span>
								<span class="el-icon-arrow-right"></span>
							</p>
						</section>

						<section class="checkbox" v-if='getCcList'>
							<el-checkbox-group v-model='zhihuirenSelect'>
								<p v-for='(k,i) in getCcList.empList'>
									<el-checkbox :label='k'>{{k.name}}</el-checkbox>
								</p>
							</el-checkbox-group> 
							
						</section>

       
        </el-col>

        <el-col class="body-right" :span='12'>
          <el-row class="body-right-title" tag='h2'>
            已选择知会人
          </el-row> 
         <el-row class="body-right-content" v-for='(k,i) in zhihuirenSelect'>
           <el-row><el-col>{{k.name}}<span>({{k.position_desc}})</span></el-col><el-col @click.native='zhihuirenSelect.splice(i,1)'>删除</el-col></el-row>
         </el-row>
     
        </el-col>
        
      </el-row>

      <div class="dialog-footer">
        <el-button @click.stop="sureSave" type="primary">确 定</el-button>
        <el-button @click.stop="closeZhihuiren">取 消</el-button>
      </div>

    </el-dialog>
    </section>
  </div>
  	<light-box :selected.sync="selected" :imgUrlList="imgUrlList" :visiblable.sync="visiblable"></light-box>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Message,
  MessageBox,
  Dialog,
  Row,
  Col,
  Checkbox,
  CheckboxGroup,
  Tooltip
} from "element-ui";
import header from "@/components/employee/header";


import lightBox from "@/components/employee/requestVacation/lightBox";




Vue.use(Dialog);
Vue.use(Row);
Vue.use(Col);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tooltip);

export default {
  components: {
    "v-header": header,
    'light-box':lightBox
  },
  computed: {

    res () {
      if (this.detailData) {
        if (this.detailData.busi_id.startsWith('XJ')) {
          this.detailData.type = '销'
        } else if (this.detailData.busi_id.startsWith('QJ')) {
          this.detailData.type = '请'
        }
        return this.detailData
      } else {
        return []
      }
    },
    buttonFlag () {
      if (this.status == 1) {
        return false;
      }
      return true;
    }
  },
  created () {
    let params = JSON.parse(localStorage.getItem("tab1Params"));
    this.params = params;
    this.token = localStorage.getItem("token");

    params.busi_id = params.applyId;
    this.Axios.Post(this.URL.getFileListByBusiId.url, params).then(res => {
      
	      var resultList = res.data.datas;
	      
	      resultList.forEach((val,index,arr) => {
	      		if (this.handleFileType(val.fileHz) === 'img'){
	      			 this.imgList.push(val)
	      			 this.imgUrlList.push(this.Axios.baseURI+"/"+this.URL.downloadFile.url+"?id="+val.id+"&token="+this.token)
	      		} else {
	      			 this.fileList.push(val)
	      		}
	      })

    });

    this.Axios.Post(this.URL.getApprovedLogList.url, params).then(res => {
      this.LogList = res.data.datas;
    });
  },
  mounted () {
    this.getZhihuirenData()
    let params = this.params;

    this.Axios.Post(this.URL.examineBydetails.url, params).then(res => {
      let resData = res.data.datas && res.data.datas[0];

      [this.detailData, this.nextPeople] = [
        resData,
        res.data.datas && res.data.datas[1] && res.data.datas[1].nextUserName
      ];
    });
    
    this.getVacationDetail();
    
  },


  data () {
    return {
      zhihuiInput: null,
      active: 2,
      type: null,
      status: null,
      detailData: null,
      textarea: null,
      nextPeople: null,
      fileList: [],
      userNameHeader:localStorage.getItem('userName'),
      token: null,
      query: null,
      LogList: [],
      zhihuirenSelect: [],
      oldZhihuiren: [],
      getCcList: "",
      dialogVisiable: false,
      
      selected:0,
      visiblable:false,
      imgList:[],
      imgUrlList:[],
      
      aTypeSelect:[],
    }
  },
  filters: {
    ampm: function (value) {
      if (value == "1") {
        return "上午";
      } else if (value == "2") {
        return "下午";
      }
    }
  },

  directives: {
    changeHeight: {
      inserted (el, binding, vnode) {
        let targetHeight, xian
        targetHeight = el.querySelector('.message').offsetHeight
        xian = el.querySelector('.xian')
        if (xian.className === 'xian') {
          xian.style.height = targetHeight + 'px'
        }
      }
    }
  },

  methods: {
  	
  	
  	showLightBox(index){
		   this.visiblable = false;
			 console.log(this.visiblable,'showLight');
  		 if (!index) {
  		 	  console.log(index,'light');
  		 	  Vue.nextTick(() => {
  		 	  	this.visiblable = true;
  		 	  })
  		 		
  		 }
  		 this.selected = index;

  	},
  	

    mianbaoShowIf(){
      if(this.getCcList) {
        if(this.getCcList.fristDept.descr !== this.getCcList.checkDept.descr) {
          return true
        }
      }
        return false
    },

    handleColor (str) {
      switch (str) {
        case '已审批':
          return 'checking'
          break;
        case '已同意':
          return 'checking'
          break;
        case '已拒绝':
          return 'nook'
        default:
          return 'pass'
          break;
      }
    },
    handleFileType (name) {
      let type = name && name.split('.')[1]
      if (type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'svg' || type == 'gif' || type == 'bmp') {
        return 'img'
      } else if (type == 'doc' || type == 'docx') {
        return 'word'
      } else if (type == 'xls' || type == 'xlsx') {
        return 'excel'
      } else {
        return 'file'
      }
    },
    closeZhihuiren () {
      this.zhihuirenSelect = this.oldZhihuiren
      this.dialogVisiable = false
    },
    zhihuiSearch () {
      if (!this.zhihuiInput) {
        this.getZhihuirenData()
      } else {

        let params = {
          search: this.zhihuiInput,
          setid: this.getCcList.fristDept.setid
        }

        this.Axios
          .Post(this.URL.getCcListBySearch.url, params)
          .then((res) => {
            let list = res.data.datas.empList
            if (list && list.length) {
              this.getCcList.checkDept.descr = '搜索结果'
              this.getCcList.deptList = []
              this.getCcList.empList = list
            } else {
              Message({
                message: '查无此人,请调整关键字,重新搜索',
                type: 'error'
              })
            }
          })

      }

    },
    sendSecondBumenAjax (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList

        } = data);
      });
    },

    sendBumenAjax (data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept,
          empList: getCcList.empList
        } = data);
      });
    },
    back () {
      this.$router.push({ path: '/requestVacation', query: { activeName: 'a' } })

    },

    sendAjax () {

      let params = {
        idea: this.type,
        excutionId: this.params.applyId,
        comment: this.textarea,
        vrNodeId: this.res.activity_id || ''
      }


      this.Axios.Post(this.URL.getexaminationApply.url, params)
        .then(res => {

          this.status = res.data.status

          let myMessage = this.type == '同意' ? '已同意' : '已拒绝'

          if (this.status == 1) {
            Message({
              message: res.data.message || myMessage,
              type: 'success'
            })

            this.gotoRouter();

          }

        })
    },

    onSubmit () {

      let messageInfo = null;

      if (this.type == "同意") {
        if (this.nextPeople) {
          messageInfo = `是否确认并提交到下一审批人 (${this.nextPeople})`;
        } else {
          messageInfo = "是否确认提交?";
        }
      } else if (this.type == "拒绝") {
        messageInfo = "确认拒绝？";
      }

      MessageBox.confirm(messageInfo, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.sendAjax();
        })
        .catch(() => { });
    },
    gotoRouter () {
      setTimeout(() => {
        this.$router.push({
          path: "/requestVacation",
          query: { activeName: "a" }
        });
      }, 1200);
    },
    sureSave () {

      MessageBox.confirm('是否确定抄送', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.saveChaosong()
        this.dialogVisiable = false

      }).catch(() => {

      });

      this.dialogVisiable = false
    },

    saveChaosong () {
      var params = {
        toEmplids: "",
        applyCode: this.params.applyId,
        actName: "",
        actId: "",
        toIdea: "",
        fromIdea: ""
      };

      if (this.zhihuirenSelect.length) {
        this.zhihuirenSelect.forEach((ele, index, arr) => {
          if (index === arr.length - 1) {
            params.toEmplids += `${arr[index].emplid}`;
          } else {
            params.toEmplids += `${arr[index].emplid},`;
          }
        });
      }

      this.Axios
        .Post(this.URL.copyToSend.url, params)
        .then((res) => {


          if (res.data.status == 1) {
            Message({
              type: 'success',
              message: res.data.message
            })
          } else {
            Message({
              type: 'error',
              message: res.data.message
            })
          }
        })
    },
    getZhihuirenData () {
      this.Axios
        .Post(this.URL.getCcList.url)
        .then(res => (this.getCcList = res.data.datas));
    },
    
    getVacationDetail () {

      this.Axios
        .Post(this.URL.getLeaveInstruction.url)
        .then((res) => {
          let datas = res.data.datas
          this.aTypeSelect = datas


        })
    },
  }
};
</script>

<style lang='less'>


.tooltip-300 {
  max-width: 300px;
  line-height: 25px !important;
  letter-spacing: 1px;
  font-size: 15px !important;
  background-color: #f0f9eb !important;
  color: #67c23a !important;
  padding: 15px !important;
  .popper__arrow {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
  .popper__arrow::after {
    border-top-color: #f0f9eb !important;
    border-bottom-color: #f0f9eb !important;
  }
}


.tooltip2 {
 background-color: #38F!important;

 .popper__arrow {
	 border-top-color: #38F!important;
	 }
 .popper__arrow::after {
	 border-top-color: #38F!important;
	 border-bottom-color:#38F!important;
 }
}

.pass {
  color: #339966;
}

.nook {
  color: #c7254e;
}

.imgContainer img{
	display:inline-block;
  margin-left: 14px;
  max-height:80px;
}

.checking {
  color: #38f;
}
.wrap {
  background-color: rgba(0, 0, 0, 0.04);
  min-height: 100%;
  overflow-x: hidden;
}
.reason {
  overflow: hidden;
  span {
    float: left;
  }
  span:last-of-type {
    max-width: 90%;
    white-space: wrap;
    overflow: hidden;
    word-wrap: break-word;
  }
}
.detail {
  width: 80%;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 50px;

  .color-one {
    color: #999;
  }
  .color-two {
    color: #38f;
  }
  .color-third {
    color: #3c8dbc;
  }
  .return {
    color: #38f;
    cursor: pointer;
    border: 1px solid #38f;
    padding: 6px 15px;
    border-radius: 15px;
    background: #fff;
  }

  .return.select {
    color: #fff !important;
    background-color: #38f !important;
  }

  .view {
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.117647),
      0 1px 4px rgba(0, 0, 0, 0.117647);
    .header {
      background-color: #3c8dbc;
      padding: 10px 10px 8px 20px;
      font-size: 15px;
      > span {
        color: #fff;
        margin-left: 10px;
      }
      > span:first-of-type {
        margin-left: 0;
        color: #38f;
        background-color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: 14px;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
      }
      > span.right {
        float: right;
        margin-top: 1px;
      }
    }

    .content {
      padding: 16px 58px 40px 58px;
      position: relative;
      .span-width {
        width: 90px;
        display: inline-block;
      }

      a {
        cursor: pointer;
        span {
          position: relative;
          top: -4px;
        }
      }

      .word,
      .excel,
      .img,
      .file {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/ 100% 100%;
        margin: 0 8px 0 2px;
      }

      .word {
        background-image: url(../../../../static/images/word.svg);
      }

      .excel {
        background-image: url(../../../../static/images/excel.svg);
      }

      .img {
        background-image: url(../../../../static/images/img.svg);
      }

      .file {
        background-image: url(../../../../static/images/file.svg);
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 20px;
        background-color: #ecf0f5;
        height: 1px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
      }

      & > div {
        margin: 6px 0;
        i.wenhao {
          font-style: normal;
          background-color: #89abc6;
          color: #fff;
          display: inline-block;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 50%;
          text-align: center;
          margin-left: 3px;
          font-size: 12px;
          cursor: pointer;
        }
        & > span:nth-of-type(n + 2) {
          margin-left: 14px;
        }
      }

      & > div:last-of-type {
        overflow: hidden;
        & > p {
          float: left;
          margin-bottom: 4px;
        }

        & > a {
          float: left;
        }

        & > span {
          float: left;
        }
      }
    }

    .steps {
      padding: 0px 0 20px 16px;
      .steps-list {
        & > div,
        & > p {
          display: inline-block;
          vertical-align: top;
        }

        .date {
          min-width: 15%;
        }

        .people {
          width: 20%;
        }

        .message {
          word-wrap: break-word;
          white-space: wrap;
          max-width: 400px;
          padding-bottom: 20px;
        }

        .buzhou {
          margin-left: 30px;
          width: 8%;
        }

        .xian {
          border-right: 1px dashed #999;
          width: 1px;
          min-height: 60px;
          margin: 0 30px;
          > span {
            transform: translateX(-50%) scale(1.3);
            background-color: #fff;
            color: #999;
          }
          > span.ok {
            color: #38f;
          }
        }

        .xian.last {
          height: 0;
          min-height: 0;
          & > span {
            top: 4px;
          }
        }
      }
    }

    .deside {
      margin: 60px 0px 20px 10px;
      text-align: left;
      > a {
        color: #38f;
        cursor: pointer;
        border: 1px solid #38f;
        padding: 6px 15px;
        border-radius: 15px;
        margin: 0 2px;
      }
    }
  }

  .text-area {
    width: 60%;
    margin: 30px 12px;
    .submit {
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .dialog-footer {
    position: relative;
    left: 100%;
    transform: translateX(-50%);
    width: 320px;
  }
}

.dialog {
  overflow-x: hidden;
  .dialog-title {
    display: inline-block;
    text-align: center;
    color: #999;
    font-size: 17px;
    position: relative;
    left: 50%;
    top: -1px;
    transform: translateX(-50%);
  }

  .body {
    margin-top: 15px;
    ::-webkit-scrollbar {
      width: 4px;
    }
    ::-webkit-scrollbar-track {
      background-color: #bee1eb;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #00aff0;
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: #00aff0;
    }

    .body-left,
    .body-right {
      padding-left: 20px;
    }
    .body-left {
      height: 380px;
      max-height: 380px;
      overflow-y: auto;
      .checkbox {
        padding: 10px 0 0 10px;
        p {
          padding: 7px 0;
        }
      }
      .mianbao {
        padding: 14px 0 14px 14px;
        position: relative;
        margin-left: 2px;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        &::after {
          content: "";
          position: absolute;
          left: -6px;
          bottom: 6px;
          height: 1px;
          width: 95%;
          background: #f1f1f1;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 3px;
          height: 14px;
          transform: translateY(-50%);
          background: #38f;
        }
        span {
          float: left;
          margin: 12px 8px 0 8px;
          color: #999;
          font-size: 12px;
          transform: scale(0.7);
        }
        p {
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          max-width: 100px;
        }
        p:first-of-type {
          cursor: pointer;
        }

        p:last-of-type {
          color: #38f;
        }
      }

      .bumen {
        width: 92%;

        & > p {
          padding: 8px 4px;
          cursor: pointer;
          span:first-of-type {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            max-width: 210px;
            display: inline-block;
          }
          span:last-of-type {
            color: #999;
            transform: scale(0.7);
            float: right;
            margin-top: 4px;
          }
        }
      }
      .body-left-people {
        margin-top: 20px;
        padding-right: 100px;
        font-size: 15px;
        & > div {
          margin-top: 10px;
          color: #999999;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          > span {
            font-weight: 500;
          }
        }
      }

      .show-all {
        font-size: 13px;
        margin: 30px 0 0 10px;
        color: #999;
        cursor: pointer;
        margin-bottom: 20px;
      }

      .body-left-title {
        margin-top: 30px;
      }
    }

    .body-right {
      height: 360px;
      max-height: 360px;
      overflow-y: auto;
      .body-right-content {
        & > div {
          margin-top: 20px;

          & > div:first-of-type {
            color: #333;
            float: left;
            max-width: 75%;
            span {
              color: #999;
              margin-left: 6px;
            }
          }

          & > div:last-of-type {
            float: right;
            width: 40px;
            color: #00aff0;
            cursor: pointer;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>